<script setup>
    import { sdCityList, getName } from '@/utils/index'
    import { getJobList, jobDelete } from '@/common/apis'
    import AddPost from './AddPost.vue'
    import AddMember from './AddMember.vue'

    const tabbarData = ['岗位库', '人员库']
    let current = $ref(0)
    
    // 人员列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20,
    })

    // 列表数据加载中
    let dataLoading = $ref(false)


    // 岗位库
    let postData = $ref([])
    let postTotal = $ref(0)
    const getPostList = () => {
        dataLoading = true
        // setTimeout(() => {
        //     dataLoading = false
        //     let data = { s0: '济南市', s1: '城镇岗位', s2: '公共管理类', s3: '3', s4: '3000', s5: '林业防护', s6: '林业防护', s7: '济南历城区', s8: '8',  s9: '王*', s10: '18810498554', s11: '单位1', s12: '单位2'  }
        //     postData = []
        //     for(let i = 0; i < filterParams.pageSize; i++){
        //         postData.push(data)
        //     }
        //     totalCount = 245
        // }, 300);

        getJobList(filterParams).then(res => {
            dataLoading = false
            if(res.success){
                let { records, total } = res.result

                postData = records
                postTotal = total
            }
        })
    }

    const getList = () => {
        dataLoading = true
        // getGygSubsidyList(filterParams).then(res => {
        //     dataLoading = false
        //     if(res.success){
        //         let { records, total } = res.result

        //         resData = records
        //         totalCount = total
        //     }
        // })

        if(current == 0){
            getPostList()
            return
        }

        setTimeout(() => {
            dataLoading = false
            resData = [
                { s1: '枣庄市', s2: '李玉艳', s3: '女', s4: '就业困难的失业人员', s5: '低保户', s6: '370421********1266', s7: '3704214567998321' },
                { s1: '枣庄市', s2: '明守富', s3: '男', s4: '就业困难的失业人员', s5: '低保户', s6: '370421********1214', s7: '3704214564293478' },
                { s1: '枣庄市', s2: '秦庆霞', s3: '女', s4: '就业困难的失业人员', s5: '低保户', s6: '370481********0946', s7: '3704214567596734' },
                { s1: '枣庄市', s2: '秦霞', s3: '女', s4: '就业困难的失业人员', s5: '低保户', s6: '370421********2223',   s7: '3704214574120643' },
                { s1: '枣庄市', s2: '倪国晶', s3: '女', s4: '就业困难的失业人员', s5: '低保户', s6: '370421********0330', s7: '3704214008020344' },
                { s1: '枣庄市', s2: '贾真真', s3: '女', s4: '就业困难的失业人员', s5: '低保户', s6: '370421********1260', s7: '3704214974123042' }
            ]
            for(let i = 0; i < 20; i++){
                let data = { s1: '济南市', s2: getName(), s3: '男', s4: '就业困难的失业人员', s5: '低保户', s6: '370481********8765', s7: '3704819009998765' }
                data.id = i + 1
                resData.push(data)
            }
            console.log(resData)
            totalCount = 26
        }, 500);
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 20
        }
    }

    // 修改岗位
    let addPost = $ref(null)

    // 修改人员
    let addMember = $ref(null)

     // 新增
    const addSuccess = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 删除
    const clickDelete = (id) => {
        jobDelete({ id }).then(res => {
            if(res.success){
                ElMessage.success('删除成功~')
                getList()
            }else{
                ElMessage.error(res.message)
            }
        })
    }

    const clickDelete2 = (index) => {
        resData.splice(index, 1)
        ElMessage.success('删除成功~')
    }
    

</script>

<template>
    <div class="top-tabbar-wrap">
        <div 
            class="tabbar-item"
            v-for="(item, index) in tabbarData"
            :key="index"
            :class="{ active: current == index }"
            @click="current = index; getList()"
        >
            {{ item }}
        </div>
    </div>

    <div class="health-search" v-if="current == 0">
        <div class="health-search-form-warp dz-filter-wrap post-search">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="80"
                class="mt10"
            >
                <el-form-item label="行政区划">
                    <el-select v-model="filterParams.sysOrgCode" placeholder=" " clearable @clear="delete filterParams.sysOrgCode">
                        <el-option
                            v-for="(item, index) in sdCityList"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位名称">
                    <el-input v-model="filterParams.name"></el-input>
                </el-form-item>
                <el-form-item label="岗位性质">
                    <el-select v-model="filterParams.s1" placeholder=" " clearable @clear="delete filterParams.type">
                        <el-option
                            v-for="(item, index) in ['城镇岗位', '乡村岗位']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位类型">
                    <el-select v-model="filterParams.s2" placeholder=" " clearable @clear="delete filterParams.s2">
                        <el-option
                            v-for="(item, index) in ['公共管理类', '公共服务类', '社会事业类', '设施维护类', '社会治理类']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作内容">
                    <el-input v-model="filterParams.s3"></el-input>
                </el-form-item>
                <el-form-item label="单位类型">
                    <el-select v-model="filterParams.s4" placeholder=" " clearable @clear="delete filterParams.s4">
                        <el-option
                            v-for="(item, index) in ['用岗单位', '设岗单位']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ postTotal }}条</span>
                </div>
                <div class="add-btn" @click="addPost.showAddPost({}, 'add')">新增岗位</div>
            </div>
            
            <el-table 
                :data="postData" 
                style="width: 100%"
                height="530"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="s1" label="行政区划" min-width="100">
                    <template #default>
                        济南市
                    </template>
                </el-table-column>
                <el-table-column prop="jobNature" label="岗位性质" min-width="100" />
                <el-table-column prop="jobGenre" label="岗位类型" min-width="100" show-overflow-tooltip />
                <el-table-column prop="jobNumb" label="岗位数量" min-width="90" align="center" />
                <el-table-column prop="salary" label="薪资待遇" min-width="80" align="center" />
                <el-table-column prop="jobName" label="岗位名称" min-width="160" show-overflow-tooltip />
                <el-table-column prop="jobDetails" label="工作内容" min-width="160" />
                <el-table-column prop="jobAddress" label="工作地址" min-width="120" />
                <el-table-column prop="workHours" label="工作时长" min-width="100" align="center"  />
                <el-table-column prop="linkman" label="联系人" min-width="90" align="center"  />
                <el-table-column prop="phone" label="联系电话" min-width="130" align="center"  />
                <el-table-column prop="setPost" label="设岗单位" min-width="240" show-overflow-tooltip />
                <el-table-column prop="usePost" label="用岗单位" min-width="240" show-overflow-tooltip />
                <el-table-column prop="v6" label="操作" min-width="200" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <el-popconfirm title="确定要删除此条数据吗?" @confirm="clickDelete(scope.row.id)">
                                <template #reference>
                                    <span>删除</span>
                                </template>
                            </el-popconfirm>
                            <span @click="addPost.showAddPost(scope.row, 'details')">查看</span>
                            <span @click="addPost.showAddPost(scope.row, 'edit')">修改</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="postTotal" 
                :page-size="filterParams.pageSize"
                :current-page="filterParams.pageNo"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

    <div class="health-search" v-if="current == 1">
        <div class="health-search-form-warp dz-filter-wrap">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="105"
                class="mt10"
            >
                <el-form-item label="行政区划">
                    <el-select v-model="filterParams.s1" placeholder=" " clearable @clear="delete filterParams.s1">
                        <el-option
                            v-for="(item, index) in sdCityList"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员类别">
                    <el-select v-model="filterParams.s15" placeholder=" " clearable @clear="delete filterParams.s15">
                        <el-option
                            v-for="(item, index) in ['农民', '学生', '工人', '社会人士', '农村低收入人口']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="困难类别">
                    <el-select v-model="filterParams.s12" placeholder=" " clearable @clear="delete filterParams.s12">
                        <el-option
                            v-for="(item, index) in ['低保户']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading">
            <div class="result-title">
                查询结果
                <span class="result-count">共{{ totalCount }}条</span>
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="530"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="s1" label="行政区划" min-width="100" />
                <el-table-column prop="s2" label="姓名" min-width="70" />
                <el-table-column prop="s3" label="性别" min-width="80" align="center" />
                <el-table-column prop="s4" label="人员类别" min-width="120" />
                <el-table-column prop="s5" label="困难类别" min-width="120" align="center" />
                <el-table-column prop="s6" label="身份证" min-width="160" />
                <el-table-column prop="s7" label="就失业登记号" min-width="120" />
                <el-table-column prop="v6" label="操作" min-width="200" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <el-popconfirm title="确定要删除此条数据吗?" @confirm="clickDelete2(scope.$index)">
                                <template #reference>
                                    <span>删除</span>
                                </template>
                            </el-popconfirm>
                            <span @click="addMember.showAddMember(scope.row, 'details')">查看</span>
                            <span @click="addMember.showAddMember(scope.row, 'edit')">修改</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                :current-page="filterParams.pageNo"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

    <!-- 岗位修改 -->
    <add-post ref="addPost" @addSuccess="addSuccess"></add-post>

    <!-- 人员库 修改 和详情 -->
    <add-member ref="addMember"></add-member>

</template>


<style lang="less">
    .post-search{
        &.dz-filter-wrap .el-input, &.dz-filter-wrap .el-select{
            width:120px !important;
        }
    }
</style>